// 库存预警
<template>
  <div class="InventoryWarning">
    <div style="padding: 15px; background: #f8f8f8">
      <BreadcrumbLayer></BreadcrumbLayer>
    </div>
    <el-row class="table">
      <el-row class="select">
        <el-form :inline="true" :model="formInline" ref="resetFormData" class="demo-form-inline">
          <el-form-item label="物品编号" prop="id">
            <el-input style="width: 150px" v-model="formInline.id" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="物品名称" prop="name">
            <el-input style="width: 150px" v-model="formInline.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="物品类别" prop="group">
            <el-select style="width: 150px" v-model="formInline.group" placeholder="请选择">
              <el-option label="设备类别1" value="设备类别1" />
              <el-option label="设备类别2" value="设备类别2" />
              <el-option label="设备类别3" value="设备类别3" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button color="#33b686" style="color: white" :icon="Search" type="primary" @click="onSubmit"
              >查询</el-button
            >
            <el-button type="reset" :icon="Refresh" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-col>
        <h3>查询结果列表</h3>
      </el-col>
      <el-row class="btn">
        <el-button color="#33b686" style="color: white">打印</el-button>
        <el-button color="#33b686" style="color: white">导出</el-button>
      </el-row>
      <el-row>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          :key="tableNum"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          header-align="center"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" type="index" label="序号" width="80" />
          <el-table-column align="center" property="id" label="物品编号" width="130" />
          <el-table-column align="center" property="name" label="物品名称" width="100" />
          <el-table-column align="center" property="type" label="规格型号" width="130" />
          <el-table-column align="center" property="group" label="物品类别" width="130" />
          <el-table-column align="center" property="units" label="计量单位" width="80" />
          <el-table-column align="center" property="warning" label="预警值" width="100" />
          <el-table-column align="center" property="warehousing" label="仓库" width="130" />
          <el-table-column align="center" property="nowNum" label="当前值" width="80" />
        </el-table>
      </el-row>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
// import inStore from '../../store/in'
import BreadcrumbLayer from '../../components/box-components/BreadcrumbLayer.vue'
import { ref, reactive, computed } from 'vue'
import { ElTable, ElForm, ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh } from '@element-plus/icons-vue'
// const mainstore = defineStore('admin', {
//   state: () => {
//     return {}
//   },
//   getters: {},
//   actions: {}
// })
// const store = inStore()

interface InventoryWarning {
  id: string
  name: string
  type: string
  group: string
  units: string
  warning: string
  warehousing: string
  nowNum: number
}
const formInline = reactive({
  id: 'WP',
  name: '100齿轮',
  group: '设备类别1'
})
let tableData: InventoryWarning[] = ref([
  {
    id: 'WP2398130',
    name: '100齿轮',
    type: '18*5 圆形 不锈钢',
    nowNum: 10,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398131',
    name: '100齿轮',
    type: '18*5 方形 不锈钢',
    nowNum: 110,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398132',
    name: '100齿轮',
    type: '20*5 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398133',
    name: '100齿轮',
    type: '5*1 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398134',
    name: '100齿轮',
    type: '18*5 圆形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398135',
    name: '100齿轮',
    type: '18*5 圆形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398136',
    name: '100齿轮',
    type: '5*1 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398137',
    name: '200齿轮',
    type: '5*1 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  }
])

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<InventoryWarning[]>([])
const resetFormData = ref(null)

let tableNum = 0
let cTableData = ref([
  {
    id: 'WP2398130',
    name: '100齿轮',
    type: '18*5 圆形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398131',
    name: '100齿轮',
    type: '18*5 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398132',
    name: '100齿轮',
    type: '20*5 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398133',
    name: '100齿轮',
    type: '5*1 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398134',
    name: '100齿轮',
    type: '18*5 圆形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398135',
    name: '100齿轮',
    type: '18*5 圆形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398136',
    name: '100齿轮',
    type: '5*1 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  },
  {
    id: 'WP2398137',
    name: '200齿轮',
    type: '5*1 方形 不锈钢',
    nowNum: 300,
    group: '设备类别1',
    units: '个',
    warning: '50~100',
    warehousing: '仓库01'
  }
])
// 搜索
const onSubmit = () => {
  console.log('formInline.id', formInline.id)
  console.log('formInline.group', formInline.group)
  console.log('formInline.name', formInline.name)
  getSearchTableData()
}
function getSearchTableData() {
  let searchTableData = ref(
    computed(() =>
      tableData.value.filter(item => {
        return (
          // 过滤全部数据
          item.id.includes(formInline.id) &&
          item.name.includes(formInline.name) &&
          item.group.includes(formInline.group)
        )
      })
    )
  )
  console.log(searchTableData.value)
  tableData.value = searchTableData.value
}
const getTableData = () => {
  tableData.value = []
  tableData.value = cTableData.value
  tableNum++
}

// 重置
const reset = () => {
  toggleSelection()
  resetLineForm()
  getTableData()
}
// 清空查询行内表单
/*
  需要在el-form上绑定一个ref
  需要在el-form-item上绑定一个props
*/
const resetLineForm = () => {
  resetFormData.value.resetFields()
}
// 取消多选
const toggleSelection = (rows?: InventoryWarning[]) => {
  multipleTableRef.value!.clearSelection()
}
const handleSelectionChange = (val: InventoryWarning[]) => {
  multipleSelection.value = val
  console.log('val:', val)
}
</script>

<style scoped lang="scss">
.InventoryWarning {
  box-sizing: border-box;
  background: #fff;

  .table {
    box-sizing: border-box;
    margin: 10px 20px;
    > .select {
      padding: 20px;
    }
    > .btn {
      display: flex;
      align-items: center;
      margin-left: 900px;
    }
  }
}
// 修改dialog的样式
::v-deep .el-dialog__header {
  background-color: #00a468;
  margin-right: 0px;
  .el-dialog__title,
  .el-dialog__headerbtn,
  .el-dialog__close {
    color: white;
  }
}
::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
